<!--代码逻辑和样式库-->
<script src="./device-realtime-data.component.js"></script>
<style src="./device-realtime-data.scss" scoped lang="scss"></style>

<template>
  <div>
    <div id="map-container">
    </div>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form label-position="top" :inline="true">
        <div class="aq-text-size-small aq-text-color-white-core">车辆数据情况</div>
        <el-row type="flex" class="aq-margin-top-16">
          <el-col :span="24" class="aq-vertical-middle">
            <el-select v-model="searchCriteria.selectedProvinceId" placeholder="请选择省" clearable class="aq-margin-left-8">
              <el-option label="河南省" value="410000"></el-option>
            </el-select>
            <el-select v-model="searchCriteria.cityCode" clearable filterable placeholder="请选择市" class="aq-margin-left-8">
              <el-option v-for="(item,index) in areaList" :key="index" :label="item.regName" :value="item.cityCode"></el-option>
            </el-select>
            <el-select v-model="searchCriteria.transportId" placeholder="请选择运输单位" clearable class="aq-margin-left-8">
              <el-option v-for="(item,index) in companies" :key="index" :label="item.text" :value="'' + item.id">
              </el-option>
            </el-select>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" class="aq-margin-left-8" @click="search()">
              查询
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="aq-padding-top-20 aq-text-size-small">
        <el-col :span="4" class="aq-vertical-between">
          <div class="text-center aq-padding-left-64">
            <p>车辆总数</p>
            <div class="aq-text-size-big">{{ realtimeData.totalNum }}台</div>
          </div>
          <div style="width:1px">
            <hr class="hr-line" />
          </div>
        </el-col>
        <el-col :span="4" class="aq-vertical-between">
          <div class="text-center aq-padding-left-64">
            <p>运行中车辆总数</p>
            <div class="aq-text-size-big">{{ realtimeData.runingNum }}台</div>
          </div>
          <div style="width:1px">
            <hr class="hr-line" />
          </div>
        </el-col>
        <el-col :span="4" class="aq-vertical-between">
          <div class="text-center aq-padding-left-64">
            <p>报警车辆总数</p>
            <div class="aq-text-size-big">{{ realtimeData.alarmNum }}台</div>
          </div>
          <div style="width:1px">
            <hr class="hr-line" />
          </div>
        </el-col>
        <el-col :span="4" class="aq-vertical-between">
          <div class="text-center aq-padding-left-64">
            <p>离线车辆总数</p>
            <div class="aq-text-size-big">{{ realtimeData.offiline }}台</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 详情区域 -->
    <div v-show="showStatistic" class="detail-container">
      <el-row type="flex" :gutter="80">
        <el-col :span="12">
          <div class="detail-bg">
            <div id="lineChart" :style="{width: '100%', height: '200px'}"></div>
          </div>
        </el-col>
        <el-col :span="12" class="detail-bg">
          <el-row>
            <el-col :span="12">
              <div class="aq-text-size-normal aq-text-weight-bolder">设备数据情况</div>
              <el-card class="aq-margin-top-36">
                <div class="aq-text-size-small color-grey">排放时长</div>
                <div class="aq-text-size-medium aq-text-weight-bolder aq-padding-top-8 color-blue">{{ veDisTime }}</div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <div id="pieChart" :style="{width: '100%', height: '200px'}"></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
